<template>
  <el-drawer size="45%" :visible.sync="drawer" :with-header="false" :width="700" direction="rtl" :append-to-body="true">
    <div class="drawer_box">
      <div class="drawer_t">
        <div class="drawer_t_l">
          <img class="drawer_t_l_img" src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png" />
          查看活动
          <img class="drawer_t_l_img" src="/static/skin/default/MCS/AIGC/Inventory/images/bianji.png"
            @click="handleShowEdit" />
        </div>
        <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" @click="drawer = false" />
      </div>
      <div class="drawer_c">
        <div class="tabbar">
          <div @click="tabbar = 0">活动信息</div>
          <div @click="tabbar = 1">报名签到情况</div>
          <!-- <div v-if="messageList.Status == 6" @click="tabbar = 2">活动资讯</div> -->
        </div>
        <div class="container" v-if="tabbar == 0">
          <div class="view-wrapper">
            <div class="title">基本信息</div>
            <div class="form-item">
              <div class="title">活动主图：</div>
              <div class="content">
                <img class="content-img" v-if="MainUrl" :src="MainUrl" alt="" />
              </div>
            </div>
            <div class="form-item">
              <div class="title">活动附图：</div>
              <div class="content">
                <template v-if="imgList != false">
                  <img class="content-img" v-for="(item, index) in imgList" :key="index" :src="item.url" alt="" />
                </template>
              </div>
            </div>
            <div class="form-item">
              <div class="title">所属项目：</div>
              <div class="content">{{ messageList.ProjectIDName }}</div>
            </div>
            <div class="form-item">
              <div class="title">活动标题：</div>
              <div class="content">{{ messageList.Name }}</div>
            </div>
            <div class="form-item">
              <div class="title">活动地址：</div>
              <div class="content">{{ messageList.Address }}</div>
            </div>
            <div class="form-item">
              <div class="title">是否需要报名：</div>
              <div class="content">
                {{ messageList.IsRegistration ? "是" : "否" }}
              </div>
            </div>
            <div class="form-item">
              <div class="title">活动容纳人数：</div>
              <div class="content">{{ messageList.Accommodate }}</div>
            </div>
            <div class="form-item">
              <div class="title">报名时间：</div>
              <div class="content">
                {{ messageList.RegistrationStartTime }} -
                {{ messageList.RegistrationEndTime }}
              </div>
            </div>
            <div class="form-item">
              <div class="title">活动时间：</div>
              <div class="content">
                {{ messageList.StartTime }} - {{ messageList.EndTime }}
              </div>
            </div>
            <div class="form-item">
              <div class="title">活动介绍：</div>
              <div class="content w100" v-html="messageList.Description"></div>
            </div>
            <div class="form-item">
              <div class="title">发布时间：</div>
              <div class="content">{{ messageList.CreateTime }}</div>
            </div>
            <div class="form-item" v-if="messageList.IsRegistration == '是'">
              <div class="title">已报名人数(人)：</div>
              <div class="content">{{ messageList.Number }}</div>
            </div>
            <div class="form-item">
              <div class="title">浏览量(次)：</div>
              <div class="content">{{ messageList.PvCount }}</div>
            </div>

          </div>
        </div>

        <div class="container" v-if="tabbar == 1">
          <block v-if="messageList.IsRegistration == '是'">
            <div class="form-item">
              <div class="title">报名签到情况： </div>
              <div><span class="dowlond" @click="downloadExcel">导出</span></div>
            </div>
            <div class="form-item">
              <div class="content mb20">
                <el-table :data="useList" style="width: 100%" :span-method="arraySpanMethod" border>
                  <el-table-column prop="" label="序号" width="60" type="index" :index="getIndex">
                  </el-table-column>
                  <el-table-column prop="Contact" label="使用人姓名" width="180"></el-table-column>
                  <el-table-column prop="Mobile" label="使用人联系方式" width="200"></el-table-column>
                  <el-table-column prop="TypeName" label="证件类型" width="200"></el-table-column>
                  <el-table-column prop="IdentityNumber" label="证件号码" width="200"></el-table-column>
                  <el-table-column prop="" label="签到情况" width="200">
                    <template slot-scope="scope">
                      <span class="status0" v-if="scope.row.Status == 0">待签到</span>
                      <span class="status1" v-if="scope.row.Status == 1">已签到</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="CreateTime" label="报名时间" width="200"></el-table-column>
                  <el-table-column prop="ContactPerson" label="联系人姓名" width="180"></el-table-column>
                  <el-table-column prop="ContactMobile" label="联系人联系方式" width="180"></el-table-column>
                </el-table>
                <el-pagination v-if="total > 0" background layout="prev, pager, next" :total="total"
                  :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </div>
          </block>
        </div>

        <!-- <div class="container" v-if="tabbar == 2">
          <div class="OctopusList">
            <van-list>
              <van-cell-group>
                <van-cell class="head">
                  <template>
                    <div style="width: 50px;">{{ listTop.order }}</div>
                  </template>
                  <template>
                    <div style="width: 180px;">{{ listTop.icon }}</div>
                  </template>
                  <template>
                    <div style="width: 700px;">{{ listTop.title }}</div>
                  </template>
                  <template>
                    <div style="width: 60px;">{{ listTop.is_top }}</div>
                  </template>
                  <template>
                    <div style="width: 100px;">{{ listTop.status }}</div>
                  </template>
                  <template>
                    <div style="width:200px;">{{ listTop.CreateTime }}</div>
                  </template>
                </van-cell>
                <van-cell v-for="(cell, index) in list" :key="cell.title">
                  <template>
                    <div style="width: 50px;" class="Number">{{ index + 1 }}</div>
                  </template>
                  <template>
                    <div class="img_box" style="width: 180px;">
                      <img @click="lookRow(cell)" src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png"
                        alt="" />
                      <img @click="edit(cell)" src="/static/skin/default/MCS/AIGC/Inventory/images/bianji.png" alt="" />
                      <img @click="del(cell)" src="/static/skin/default/MCS/AIGC/Inventory/images/shanchu.png" alt="" />
                    </div>
                  </template>
                  <template>
                    <el-tooltip class="item" effect="light" :content="cell.UserContent" placement="top-start">
                      <div style="width: 700px;">{{ cell.title }}</div>
                    </el-tooltip>
                  </template>
                  <template>
                    <div style="width: 60px;">
                      <span v-if="cell.IsRead == 1" class="icon icon70chenggong"></span>
                      <span v-if="cell.IsRead == 0" class="icon icon71shibai"></span>
                    </div>
                  </template>
                  <template>
                    <el-tooltip class="item" effect="light" :content="cell.title" placement="top-start">
                      <div style="width: 100px;">{{ cell.title }}</div>
                    </el-tooltip>
                  </template>
                  <template>
                    <div style="width: 200px;">{{ cell.CreateTime }}</div>
                  </template>
                </van-cell>
              </van-cell-group>
            </van-list>


          </div>
          <el-pagination background layout="prev, pager, next" :total="totle" :current-page="pageIndex"
            :page-size="rowSize" @current-change="handleSalesChange">
          </el-pagination>
        </div> -->
      </div>
      <div class="button_list" v-if="messageList.Status != 0 && tabbar == 0">
        <button class="footer-btn save" style="background-color: #1E1B19;" @click="save()">撤销</button>
      </div>
      <div class="button_list" v-if="tabbar == 2">
        <button class="footer-btn save" @click="openHistory">新建</button>
      </div>
    </div>
    <editActivityHistory ref="editActivityHistory"></editActivityHistory>
  </el-drawer>
</template>

<script>
import * as XLSX from 'xlsx';
import editActivityHistory from './editActivityHistory.vue';
export default {
  components: {
    editActivityHistory
  },
  props: {
    messageList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      total: 0,
      rowSize: 1,
      currentPage: 1,
      pageSize: 10,
      useList: [],
      mergeObj: {},
      mergeArr: ['ContactPerson', 'ContactMobile'],
      tabbar: 0,
      list: [],
      listTop: {
        order: "序号",
        icon: '操作',
        title: "精彩回顾标题",
        is_top: '置顶',
        status: "状态",
        CreateTime: '操作时间',
      },
      allUsers: []
    };
  },

  computed: {
    MainUrl() {
      if (this.messageList.MainPicturePath) {
        try {
          return JSON.parse(this.messageList.MainPicturePath)[0].url;
        } catch (e) {
          return "";
        }
      }
      return "";
    },
    imgList() {
      if (this.messageList.MainPicturePath) {
        try {
          return JSON.parse(this.messageList.SecondaryPicturePath);
        } catch (e) {
          return [];
        }
      }
      return [];
    }
  },
  mounted() { },
  methods: {
    arraySpanMethod({ row, column, rowIndex }) {
      console.log(this.mergeArr.indexOf(column.property));

      if (this.mergeArr.indexOf(column.property) !== -1) {
        // 判断其值是不是为0
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1]
        }
        else {
          // 如果为8则为需要合并的行
          return [0, 0];
        }
      }

      return
      // const dataProvider = this.useList
      // const cellValue = row[column.property]
      // console.log(cellValue, row.CreateUserID, column.property);

      // if (cellValue) {
      //   // 上一条数据
      //   const prevRow = dataProvider[rowIndex - 1]
      //   // 下一条数据
      //   let nextRow = dataProvider[rowIndex + 1]
      //   // 当上一条数据等于下一条数据
      //   if (prevRow && prevRow[column.property] === cellValue) {

      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     }
      //   }
      //   else {
      //     let rowspan = 1
      //     while (nextRow && nextRow[column.property] === cellValue) {
      //       rowspan++
      //       nextRow = dataProvider[rowspan + rowIndex]
      //     }
      //     console.log(rowspan);

      //     if (rowspan > 1) {
      //       return {
      //         rowspan,
      //         colspan: 1
      //       }
      //     }
      //   }
      // }
    },
    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0;
        this.mergeObj[key] = [];
        data.forEach((item, index) => {
          if (index == 0) {
            this.mergeObj[key].push(1)
          } else {
            if (item[key] == data[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0)
            } else {
              count = index;
              this.mergeObj[key].push(1)
            }
          }
        })
      })
    },
    showDialog() {
      this.drawer = true;
      this.tabbar = 0;
      this.api_1400();

      this.api_1275();
    },
    closeDialog() {
      this.drawer = false;
    },
    handleShowEdit() {
      this.drawer = false;
      this.$emit("showEdit", this.messageList);
    },
    api_1400() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1400, // 菜单表的八爪鱼ID
          cellData: [
            { name: "Contact" }, // 报名人
            { name: "CreateTime" }, // 报名时间
            { name: "ID" }, // ID
            { name: "IdentityNumber" }, // 证件号
            { name: "Mobile" }, // 手机号
            { name: "SignTime" }, // 签到时间
            { name: "Status" }, // 签到状态
            { name: "StatusName" }, // 签到状态
            { name: "ContactMobile" },	// ContactMobile
            { name: "ContactPerson" },	// ContactPerson
            { name: "CreateUserID" },	// CreateUserID
            { name: "TypeName" },	// TypeName
          ],
          paramData: {
            ActivitID: this.messageList.ID
          },
          pageData: {
            index: this.currentPage,
            rowSize: this.pageSize
          }
        },
        data => {
          if (data.status.code === 200) {

            this.useList = data.content.queryData;
            this.getSpanArr(this.useList)

          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    handleCurrentChange() { },
    save() {
      this.$confirm('确定要把该活动下架吗？', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.api_1341()
        })
        .catch(() => {
          console.log("取消了");
        });
    },
    api_1341() {
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1341,
          type: 'UPDATE',
          value: this.messageList.ID,
          cellData: [
            { name: "Status", defaultValue: 0 } //活动状态
          ]
        },
        data => {
          if (data.status.code == 200) {
            this.octopus.tips.success('撤销发布成功。');
            this.drawer = false;
            this.$emit("refresh");
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    api_1275() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1275,
          cellData: [
            { name: "Name", },	// 新闻标题
            { name: "Source" },	// 来源
            { name: "IsTop" },	// 是否置顶
            { name: "Status" },	// 状态
            { name: "CreateUserID" },	// 创建人
            { name: "CreateTime" },	// 创建时间
            { name: "Content", show: false },	// 新闻内容
            { name: "ID", show: false },	// ID
            { name: "MainImageUrl", show: false },	// 主图
            { name: "SortNumber", show: false },	// 排序优先级
            { name: "UpdateTime", show: false },	// 维护时间
            { name: "UpdateUserID", show: false },	// 维护人
            { name: "Sort", show: false },	// Sort
            { name: "SourceID", show: false },	// 来源
          ]
        },
        data => {
          if (data.status.code == 200) {
            this.list = data.content.queryData;
            // console.log(this.list);

          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    openHistory() {
      this.$refs.editActivityHistory.drawerOpen()
    },
    async downloadExcel() {
      // 示例数据
      // const data = [
      //   { '姓名': '张三', '年龄': 25, '城市': '北京' },
      //   { '姓名': '李四', '年龄': 30, '城市': '上海' },
      //   { '姓名': '王五', '年龄': 22, '城市': '广州' }
      // ];

      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1400, // 菜单表的八爪鱼ID
          cellData: [
            { name: "Contact" }, // 报名人
            { name: "CreateTime" }, // 报名时间
            { name: "ID" }, // ID
            { name: "IdentityNumber" }, // 证件号
            { name: "Mobile" }, // 手机号
            { name: "SignTime" }, // 签到时间
            { name: "Status" }, // 签到状态
            { name: "StatusName" }, // 签到状态
            { name: "ContactMobile" },	// ContactMobile
            { name: "ContactPerson" },	// ContactPerson
            { name: "CreateUserID" },	// CreateUserID
            { name: "TypeName" },	// TypeName
          ],
          paramData: {
            ActivitID: this.messageList.ID
          },
          pageData: {
            index: this.currentPage,
            rowSize: 9999
          }
        },
        data => {
          if (data.status.code === 200) {
            let arr = []
            data.content.queryData.map(v => {
              arr.push({
                '使用人姓名': v.Contact,
                '使用人联系方式': v.Mobile,
                '证件类型': v.TypeName,
                '证件号码': v.IdentityNumber,
                '签到情况': v.StatusName,
                '报名时间': v.CreateTime,
                '联系人姓名': v.ContactPerson,
                '联系人联系方式': v.ContactMobile,
              })
            })

            // 将数据转换为工作表
            const ws = XLSX.utils.json_to_sheet(arr);
            // 创建一个新的工作簿
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            // 生成 Excel 文件并下载
            XLSX.writeFile(wb, '报名签到情况.xlsx');

          } else {
            this.octopus.tips.error(data);
          }
        }
      );

    }
  }
};
</script>
<style scoped>
.look-products {
  overflow: scroll;
  min-height: 100vh;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_c {
  font-size: 1.6rem;
  height: 85vh;
  overflow: auto;
  margin-top: 3rem;
  padding: 0 3rem;
  background-color: #fff;
}

.container {
  margin: 20px 0;
  display: flex;
  align-items: center;
  /* padding: 0 20px; */
  width: 100%;
  overflow-y: auto;
}

.drawer-left {
  width: 150px;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 12px;
  margin-right: 6px;
}

.drawer-right {
  flex: 1;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 12px;
}

.view-wrapper {
  width: 100%;
}

.view-wrapper>.title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1.8rem;
}

.form-item {
  display: flex;
}

.form-item .title {
  width: 120px;
  margin-right: 20px;
  white-space: pre-wrap;
  height: 40px;
  flex-grow: 0;
  flex-shrink: 0;
}

.content {
  width: 100%;
}

>>>.content img {
  max-width: 100%;
}

.content .content-img {
  width: 14rem;
  height: 14rem;
  border-radius: 1rem;
  border: none;
  display: inline-block;
  margin-right: 1rem;
}

.mt-20 {
  margin-top: 20px;
}

.status0 {
  display: inline-block;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 1rem;
  background: rgb(101, 139, 241, 0.1);
  color: #658bf1;
}

.status1 {
  display: inline-block;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 1.2rem;
  background: rgb(78, 243, 89, .1);
  color: #4ef359;
}

.w100 img {
  width: 100%;
}

.button_list {
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  position: absolute;
  background-color: #ffff;
  bottom: 1rem;
  width: calc(100% - 7rem);
}

.button_list button {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #f78c53;
  cursor: pointer;
}

.tabbar {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}

.tabbar div {
  padding: 10px 30px;
  cursor: pointer;
  border: 1px solid #a6a6a6;
}

.tabbar div:nth-child(1) {
  border-radius: 5px 0 0 5px;
}

.tabbar div:last-child {
  border-radius: 0 5px 5px 0;
}

.mb20 {
  margin-bottom: 20px;
}

.circle {
  width: 1rem;
  height: 1rem;
  border-radius: 0.5rem;
}

.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  cursor: pointer;
}

.OctopusList {
  overflow-y: auto;
}

/*列表分页*/
.OctopusList .Page {
  color: #222222;
  margin: 5px 0 0 0;
}

.OctopusList .Page table {
  border-collapse: collapse;
  border-spacing: 0px;
}

.OctopusList .Page table tr td {
  padding-right: 3px;
}

.OctopusList .Page table tr td span {
  padding: 2px;
  border: 1px solid #d7d7d7;
  border-radius: 7px;
  box-shadow: 1px 1px 3px #e2e0e1;
  display: inline-block;
  min-width: 23px;
  cursor: pointer;
  text-align: center;
  top: 0px;
}

.OctopusList .Page table tr td span:hover {
  background: #e5e5e5;
}

.OctopusList .Page table tr .Current span {
  border: 1px solid #101010;
  background: #565656;
  color: white;
}

.OctopusList .Page table tr .Current span:hover {
  background: #b0b0b0;
  color: white;
}

.OctopusList .Page table tr .TotalInfo>span {
  border: none;
  box-shadow: none;
  cursor: default;
  font-weight: bold;
  color: #948d8d;
}

.OctopusList .Page table tr .TotalInfo>span:hover {
  background: white;
}

.OctopusList .Page table tr .TotalInfo>span>b {
  color: #f78c52;
  padding: 0 3px 0 3px;
}

.OctopusList .Page table tr .Home span {
  line-height: 16px;
}

.OctopusList .Page table tr .Previous span {
  line-height: 16px;
}

.OctopusList .Page table tr .Next span {
  line-height: 16px;
}

.OctopusList .Page table tr .End span {
  line-height: 16px;
}

.van-cell {
  padding: 0;
  font-size: 10px;
}

.van-cell .van-cell__value div {
  padding: 8px 4px 8px 4px;
  border-right: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.van-cell>>>div {
  display: flex;
}

.icon70chenggong {
  color: #1cab37;
  font-size: 12px;
}

.icon71shibai {
  color: #ff6839;
  font-size: 12px;
}

.van-cell.head {
  background: linear-gradient(#ffffff, #f6faf5);
  font-weight: 600;
}

.van-list {
  border: 1px solid #cccccc;
  margin-top: 3px;
  height: 71vh;
}

.dowlond {
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 5px;
  border: 1px solid #ff6839;
  color: #ff6839;
  font-size: 1.2rem;
}
</style>
